<template>
	<view class="container">
		<view class="canvas-container">
			<!-- 用于绘制合成图片的Canvas -->
			<canvas canvas-id="myCanvas" id="myCanvas"
				:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
		</view>

		<view class="button-group">
			<!-- 保存到相册按钮 -->
			<u-button type="primary" @click="saveImage" :loading="saving" icon="download" text="保存到相册"
				shape='circle'></u-button>

			<!-- 分享给好友按钮 -->
			<!--      <u-button 
        type="success" 
        @click="shareToFriend" 
        :loading="sharing"
        icon="share" 
        text="分享给好友"
      ></u-button> -->

			<!-- 分享到朋友圈按钮 (仅微信小程序端支持) -->
			<!--      <u-button 
        v-if="isWeixinMiniProgram" 
        type="warning" 
        @click="shareToTimeline" 
        :loading="sharing"
        icon="weixin-fill" 
        text="分享到朋友圈"
      ></u-button> -->
		</view>

		<!-- 操作提示 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 加载中提示 -->
		<u-loading-page :loading="loading" loading-text="海报生成中..."></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasWidth: 360, // Canvas宽度，可根据背景图调整
				canvasHeight: 640, // Canvas高度，可根据背景图调整
				tempFilePath: '', // 合成后图片的临时路径
				saving: false, // 保存中状态
				sharing: false, // 分享中状态
				loading: false, // 加载中状态
				isWeixinMiniProgram: true, // 是否是微信小程序环境
				backgroundImage: '', // 背景图片URL
				qrCodeImage: 'https://tangerine-tree.an666666.com/qr-code/mini-program?page=pages/coutent/detail&scene=2-2' // 二维码图片URL
			};
		},
		onLoad(options) {
			if (typeof(options.id) != 'undefined') {
				this.loading = true
				this.request.get(`api/contents/${options.id}`).then((res) => {
					if (res.data.poster) {
						this.backgroundImage = res.data.poster
						this.request.get(`api/user`).then((res) => {
							this.qrCodeImage =
								`${getApp().globalData.apiBase}qr-code/mini-program?page=pages/content/detail&scene=${options.id}-${res.data.id}`
							// 检查运行环境
							this.checkEnvironment();
							// 初始化并绘制Canvas
							this.initCanvas();
						})
					} else {
						uni.showModal({
							title: '',
							content: '未设置海报！',
							showCancel: false,
							success: () => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
					}

				})
			}

		},
		methods: {
			// 检查运行环境
			checkEnvironment() {
				// 判断是否是微信小程序环境
				this.isWeixinMiniProgram = true;

			},

			// 初始化并绘制Canvas
			async initCanvas() {
				this.loading = true;

				try {
					// 获取Canvas上下文
					const ctx = uni.createCanvasContext('myCanvas', this);

					// 先绘制背景图片
					await this.drawImage(ctx, this.backgroundImage, 0, 0, this.canvasWidth, this.canvasHeight);

					// 在左下角绘制二维码图片（大小约为背景图的1/4）
					const qrSize = this.canvasWidth / 4;
					const qrX = 20; // 距离左边20px
					const qrY = this.canvasHeight - qrSize - 20; // 距离底部20px

					await this.drawImage(ctx, this.qrCodeImage, qrX, qrY, qrSize, qrSize);

					// 绘制完成
					ctx.draw(false, () => {
						// 获取临时图片路径
						this.getCanvasImage();
					});
				} catch (error) {
					console.error('绘制Canvas失败:', error);
					this.$refs.uToast.show({
						type: 'error',
						message: '生成图片失败，请重试',
						icon: false
					});
					this.loading = false;
				}
			},

			// 绘制图片到Canvas
			drawImage(ctx, imgUrl, x, y, width, height) {
				return new Promise((resolve, reject) => {
					// 先下载图片
					uni.downloadFile({
						url: imgUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								// 绘制图片到Canvas
								ctx.drawImage(res.tempFilePath, x, y, width, height);
								resolve();
							} else {
								reject(new Error(`下载图片失败，状态码: ${res.statusCode}`));
							}
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},

			// 获取Canvas生成的图片临时路径
			getCanvasImage() {
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					success: (res) => {
						this.tempFilePath = res.tempFilePath;
						this.loading = false;
						this.$refs.uToast.show({
							type: 'success',
							message: '图片生成成功',
							icon: false
						});
					},
					fail: (err) => {
						console.error('获取图片失败:', err);
						this.loading = false;
						this.$refs.uToast.show({
							type: 'error',
							message: '获取图片失败，请重试',
							icon: false
						});
					}
				}, this);
			},

			// 保存图片到相册
			saveImage() {
				if (!this.tempFilePath) {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先生成图片',
						icon: false
					});
					return;
				}

				this.saving = true;

				// 保存图片到相册
				uni.saveImageToPhotosAlbum({
					filePath: this.tempFilePath,
					success: () => {
						this.saving = false;
						this.$refs.uToast.show({
							type: 'success',
							message: '保存成功',
							icon: false
						});
					},
					fail: (err) => {
						console.error('保存失败:', err);
						this.saving = false;

						// 处理授权失败的情况
						if (err.errMsg && err.errMsg.indexOf('auth deny') !== -1) {
							this.showAuthSetting('需要相册权限才能保存图片');
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: '保存失败，请重试',
								icon: false
							});
						}
					}
				});
			},

			// 显示授权设置面板
			showAuthSetting(message) {
				uni.showModal({
					title: '权限申请',
					content: message,
					confirmText: '去设置',
					success: (res) => {
						if (res.confirm) {
							// 打开设置页面
							uni.openSetting({
								success: (settingRes) => {
									console.log('设置结果:', settingRes);
								}
							});
						}
					}
				});
			},

			// 分享给好友
			shareToFriend() {
				if (!this.tempFilePath) {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先生成图片',
						icon: false
					});
					return;
				}

				this.sharing = true;

				// 先上传图片获取网络地址（实际项目中需要上传到服务器）
				// 这里简化处理，直接使用本地路径（在某些平台上可能无效）
				// APP端分享
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 'image',
					imageUrl: this.tempFilePath,
					success: () => {
						this.sharing = false;
						this.$refs.uToast.show({
							type: 'success',
							message: '分享成功',
							icon: false
						});
					},
					fail: (err) => {
						console.error('分享失败:', err);
						this.sharing = false;
						this.$refs.uToast.show({
							type: 'error',
							message: '分享失败',
							icon: false
						});
					}
				});
				// 小程序端分享（需先上传图片）
				this.uploadAndShare('WXSceneSession');
			},

			// 分享到朋友圈（仅微信小程序支持）
			shareToTimeline() {
				if (!this.tempFilePath) {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先生成图片',
						icon: false
					});
					return;
				}

				this.sharing = true;

				// 先上传图片获取网络地址
				this.uploadAndShare('WXSceneTimeline');
			},

			// 上传图片并分享
			uploadAndShare(scene) {
				this.sharing = true;

				// 注意：实际项目中需要将图片上传到服务器获取网络URL
				// 这里仅作演示，简化处理
				uni.showModal({
					title: '提示',
					content: '分享功能需要上传图片到服务器，请在项目中实现上传接口',
					showCancel: false,
					success: () => {
						this.sharing = false;
					}
				});

				/* 实际项目中的代码可能类似这样：
				uni.uploadFile({
				  url: 'https://your-api-domain.com/upload',
				  filePath: this.tempFilePath,
				  name: 'file',
				  success: (uploadRes) => {
				    const imageUrl = JSON.parse(uploadRes.data).url;
				    
				    uni.share({
				      provider: 'weixin',
				      scene: scene,
				      type: 'image',
				      imageUrl: imageUrl,
				      success: () => {
				        this.sharing = false;
				        this.$refs.uToast.show({
				          type: 'success',
				          message: '分享成功',
				          icon: false
				        });
				      },
				      fail: (err) => {
				        console.error('分享失败:', err);
				        this.sharing = false;
				        this.$refs.uToast.show({
				          type: 'error',
				          message: '分享失败',
				          icon: false
				        });
				      }
				    });
				  },
				  fail: (err) => {
				    console.error('上传失败:', err);
				    this.sharing = false;
				    this.$refs.uToast.show({
				      type: 'error',
				      message: '上传图片失败',
				      icon: false
				    });
				  }
				});
				*/
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.canvas-container {
		margin-bottom: 40rpx;
		border: 1rpx solid #eee;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.button-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	/* 响应式设计 */
	@media (min-width: 768px) {
		.button-group {
			flex-direction: row;
			justify-content: center;
		}

		.button-group>* {
			flex: 1;
			max-width: 300rpx;
		}
	}
</style>